<script lang="ts" setup>
  import { defineProps, ref, watch, defineEmits } from "vue"

  const props = defineProps(['src']);
  const emit = defineEmits(['del']);

  const del = () => {
    emit('del', props.src)
  }

  const dialogVisible = ref(false)

  const handlePictureCardPreview = () => {
    dialogVisible.value = true
  }
</script>

<template>
  <div class="img-container">
    <img  :src="props.src" class="upload-img-image" />
    <div class="overlay">
      <el-icon class="overlay-icon" @click="handlePictureCardPreview"><FullScreen /></el-icon>
      <el-icon class="overlay-icon" @click="del"><Delete /></el-icon>
    </div>
    <el-dialog v-model="dialogVisible">
      <img w-full :src="props.src" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
  .img-container{
    position: relative;
    overflow: hidden;
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    color: white; /* 字体颜色 */
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:0 12px;
    opacity: 0; /* 悬停时变为完全可见 */
  }
  .upload-img-image:hover .overlay {
    opacity: 1; /* 悬停时变为完全可见 */
  }
  .overlay-icon{
    cursor: pointer;
  }
</style>
